<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="top-nav">
      <view class="nav-left">
        <text class="title">待办</text>
        <button class="mode-btn" @click="changeMode">点击开启学霸模式</button>
        <text class="auth-btn">必开权限</text>
      </view>
      <view class="nav-right">
        <button class="add-btn" @click="showAddModal = true;isEdit = false">+</button>
		<button class="add-btn" @click="isEdit = !isEdit">
		        {{ isEdit ? '完成编辑' : '编辑' }}
		 </button>
      </view>
    </view>
    <!-- 待办列表 -->
    <view class="todo-list" :style="{ marginRight: activeMargin}" >
      <view 
        v-for="(item, index) in todoList" 
        :key="index" 
        class="todo-item"
      >
        <image 
          :src="item.bgImage" 
          class="todo-bg" 
          mode="cover"
        >
		</image>
		<view v-if="isEdit" >
		  <checkbox class="image-checkbox" v-model="item.checked" @click="getById(item)"></checkbox>
		</view>
        <view class="todo-info">
          <text class="todo-title">{{ item.title }}</text>
          <text class="todo-time">{{item.time}}</text>
        </view>
        <text class="start-btn" @click="ShowStart = true">开始</text>
      </view>
    </view>
	
	<view v-if="isEdit && todoList.length > 0">
		<button class="delete-btn" @click="deleteSelected">删除选中</button>
	</view>
	    <!-- 添加待办弹窗 -->
     <view v-if="showAddModal" class="modal-mask">
          <view class="modal-container">
            <view class="modal-header">
              <text class="modal-title">添加待办事项</text>
              <text class="close-icon" @click="closeModal">×</text>
            </view>
            <view class="modal-body">
              <input 
                v-model="newTodoTitle" 
                placeholder="请输入待办事项名称" 
                class="input-field"
              />
              <input 
                v-model="newTodoTime" 
                placeholder="请输入待办事项时长（分钟）" 
                type="number" 
                class="input-field"
              />
            </view>
            <view class="modal-footer">
              <button class="cancel-btn" @click="closeModal">取消</button>
              <button class="confirm-btn" @click="addTodo">确定</button>
            </view>
          </view>
        </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
	  showAddModal:false,
	  newTodoTitle: '',
	  newTodoTime: '',
	  activeMargin:'0px',
	  isEdit:false,
      todoList: [],
	  id:''
    };
  },
  methods:{
	  changeMode(){
		  console.log('切换模式')
	  },
	  getById(values)
	  {
         this.id = values.id;
	  },
	  addTodo() {
		if (this.newTodoTitle && this.newTodoTime) {
			uni.request({
				url:'http://localhost:3000/api/todo/todos',
				method:'POST',
				data:{
					title:this.newTodoTitle,
					description:this.newTodoTime,
					compleleted:false
				},
				success:(res) => {
					if (res.data.success) {
						this.todoList.push({
							id:res.data.data.id,
							title: res.data.data.title,
							bgImage: 'https://picsum.photos/600/400?random=' + Date.now(),
							time: res.data.data.description + ' 分钟',
							checked:res.data.data.compleleted
						});
						this.newTodoTitle = '';
						this.newTodoTime = '';
					} 
				}
			})
		 //  this.todoList.push({
			// title: this.newTodoTitle,
			// bgImage: 'https://picsum.photos/600/400?random=' + Date.now(),
			// time: this.newTodoTime + ' 分钟',
			// checked:true
		 //  });
		}
		this.showAddModal = false;
	  },
	  closeModal() {
		this.showAddModal = false;
	  },
	   deleteSelected() {
		this.todoList = this.todoList.filter(item => !item.checked);
		uni.request({
			url:`http://localhost:3000/api/todo/todos/${this.id}`,
			method:'DELETE',
			data:{
				id:this.id
			},
			success:(res) => {
				if (res.data.success) {
				{	
					this.todoList = [],
					this.$nextTick(function(){
						this.getInformation();	
					})
				}
				} 
			}
		})
		this.isEdit = false;
	  },
	  getInformation(){
		  uni.request({
		  	url:'http://localhost:3000/api/todo/todos',
		  	method:'GET',
		  	success:(res) => {
		  		console.log(res)
		  		if (res.data.success) {
		  			for(const item of res.data.data)		
		  			{
		  				this.todoList.push({
		  					id:item.id,
		  					title: item.title,
		  					bgImage: 'https://picsum.photos/600/400?random=' + Date.now()+item.id,
		  					time: item.description + ' 分钟',
		  					checked:item.compleleted
		  				});
		  			}
		  			
		  		} 
		  	}
		  })
	  }
  },
  mounted() {
	this.getInformation();
  }
};
</script>

<style scoped>
.container {
   background: linear-gradient(45deg, #ffffff 0%, #68cc6b 99%, #f4f663 100%);
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.top-nav {
  /* background: linear-gradient(135deg, #ffb6c1, #ff69b4); */
background-color: #aaff7f;
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.title {
  color: white;
  font-size: 32rpx;
  font-weight: bold;
}

.mode-btn {
  background-color: #fff5ee;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  color: #ff69b4;
  font-size: 24rpx;
}

.auth-btn {
  color: white;
  font-size: 24rpx;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.nav-icon {
  color: black;
}

.add-btn {
  color: black;
  font-size: 28rpx;
  font-weight: bold;
}

.todo-list {
  margin-top: 120rpx;
  padding: 20rpx;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.todo-item {
  position: relative;
  height: 240rpx;
  border-radius: 30rpx;
  overflow: hidden;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
}

.todo-bg {
  width: 100%;
  height: 100%;
  filter: brightness(80%);
}

.todo-info {
  position: absolute;
  left: 20rpx;
  bottom: 20rpx;
  z-index: 1;
}

.todo-title {
  color: white;
  font-size: 45rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
  margin-right: 20rpx;
}

.todo-time {
  color: white;
  font-weight: 500;
  font-size: 24rpx;
}

.start-btn {
  position: absolute;
  right: 20rpx;
  top: 30rpx;
  color: white;
  font-size: 39rpx;
  z-index: 1;
}

.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1001;
}

.modal-container {
 background: linear-gradient(45deg, #dcff9a 0%, #84eb81 99%, #c3d618 100%);
  border-radius: 10rpx;
  width: 80%;
  max-width: 600rpx;
  padding: 30rpx;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.modal-title {
  font-size: 32rpx;
  font-weight: bold;
  color: orange;
}

.close-icon {
  font-size: 37rpx;
  color: #999;
  cursor: pointer;
}

.modal-body {
  margin-bottom: 20rpx;
}

.input-field {
  width: 100%;
  height: 60rpx;
  border: 1px solid #f6f69e;
  border-radius: 5rpx;
  padding: 0 10rpx;
  font-size: 25rpx;
  font-weight: 700;
  margin-bottom: 15rpx;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
}

.cancel-btn {
  margin-right: 20rpx;
  border-radius: 30rpx;
}

.confirm-btn {
    background-color: orange;
  border-radius: 30rpx;
  color: #000000;
}
.image-checkbox {
  position: absolute;  // 绝对定位，相对于容器定位
  top: 10rpx;
  left: 10rpx;
  z-index: 1;  // 确保checkbox在图片上层
}
.delete-btn{
	background-color: red;
	color: #000000;
	position: fixed;
	  right: 20rpx; /* 距离右侧20rpx */
	  bottom: 20rpx; /* 距离底部20rpx */
	  z-index: 1000;
}
</style>